<page-header></page-header>
<div nz-row>
    <!-- 组 -->
    <div nz-col nzSpan="8">
        <nz-card nzTitle="用户组" [nzExtra]="groupTemplate">
            <div class="mb-md">
                <input nz-input [(ngModel)]="groupParams.name" name="name" placeholder="请输入名称" style="width: 200px;" class="mr-sm" />
                <button nz-button (click)="queryGroup(null)" >搜索</button>
                <button nz-button (click)="resetGroup()">重置</button>
            </div>
            <st #group [data]="groupPage.records" [pi]="groupPage.current" [ps]="groupPage.size" 
            [total]="groupPage.total" [page]="groupPagination" [columns]="groupColumns" 
            (change)='groupChange($event)'></st>
        </nz-card>
        <ng-template #groupTemplate>
            <button nz-button [nzType]="'primary'" (click)='addGroup(null)'>添加组</button>
        </ng-template>
    </div>
    <!-- 用户 -->
    <div nz-col nzSpan="15" style='margin-left:10px;'>
        <nz-card nzTitle="{{currentGroup.name}}组用户" [nzExtra]="userTemplate">
            <div class="mb-md">
                <input nz-input [(ngModel)]="userParams.account" name="account" placeholder="请输入用户名" style="width: 200px;" class="mr-sm" />
                <input nz-input [(ngModel)]="userParams.name" name="name" placeholder="请输入姓名" style="width: 200px;" class="mr-sm" />
                <button nz-button (click)="queryUser(null)" >搜索</button>
                <button nz-button (click)="resetUser()">重置</button>
            </div>
            <st #user [data]="userPage.records" [pi]="userPage.current" [ps]="userPage.size" 
            [total]="userPage.total" [page]="userPagination" [columns]="userColumns">
                <ng-template st-row="groupName" let-item>
                    <nz-tag [nzColor]="'#108ee9'" *ngFor="let group of item.groupName">{{group}}</nz-tag>
                </ng-template>
        </st>
        </nz-card>
        <ng-template #userTemplate>
            <button nz-button [nzType]="'primary'" (click)="addUser()">添加用户</button>
        </ng-template>
    </div>
</div>